<template>
  <d2-container>
    <search_main :list="formLine" :search="queryForm"/>
    <el-card style="margin-top: 5px;">
      <el-divider content-position="right">
        <el-button type="text" icon="el-icon-plus"  @click="openChildModal()">添加
        </el-button>
      </el-divider>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="name" label="字典名称" align="center"></el-table-column>
        <el-table-column label="启用/禁用" align="center">
          <template slot-scope="scope">
            <el-tag size="small" type="danger" v-if="scope.row.status===0">禁用</el-tag>
            <el-tag size="small" type="success" v-if="scope.row.status===1">启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="字典编码" align="center">
          <template slot-scope="scope">
            <span  v-if="scope.row.code">{{scope.row.code}}</span>
            <span  v-if="!scope.row.code">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="parentCode" label="上级编码" align="center">
          <template slot-scope="scope">
            <span  v-if="scope.row.parentCode">{{scope.row.parentCode}}</span>
            <span  v-if="!scope.row.parentCode">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="createName" label="创建人" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="remark" label="描述信息" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" style="color: #ff2222" size="small" @click="delDict(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging :page="page" :currentChange="currentChange" :sizeChange="sizeChange"/>
      <modal ref="modal" :dictTree="dictTree" :dictList="dictList" :initList="initList"></modal>
    </el-card>
  </d2-container>
</template>

<script>
// eslint-disable-next-line camelcase
import search_main from '@/views/components/select-form'
import paging from '@/views/components/paging'
import modal from './modal'
import { dictPage, dictList, delDict } from '@/api/system/dict'
import util from '@/libs/util'

export default {
  name: 'index',
  components: {
    search_main,
    paging,
    modal
  },
  data () {
    return {
      formLine: [
        {
          type: 'input',
          key: 'name',
          label: '字典名称',
          dataType: 'string'
        },
        {
          type: 'input',
          key: 'code',
          label: '字典编码',
          dataType: 'string'
        },
        {
          type: 'radio',
          key: 'status',
          label: '是否启用',
          dataType: 'number',
          options: [{
            value: '1',
            label: '启用'
          }, {
            value: '0',
            label: '禁用'
          }]
        }
      ],
      page: {
        size: 10,
        total: 0,
        current: 1
      },
      formParam: {},
      list: [],
      dictList: [],
      dictTree: []
    }
  },
  created () {
    this.initList()
    this.initDict()
  },
  methods: {
    initList () {
      dictPage({ ...this.formParam, ...this.page }).then(e => {
        if (e && e.records) {
          this.list = e.records
          this.page = {
            current: parseInt(e.current),
            size: parseInt(e.size),
            total: parseInt(e.total)
          }
        }
      })
    },
    initDict () {
      dictList().then(res => {
        if (res && res.length && res.length > 0) {
          this.dictTree = util.tree(res, 'parentId', 'children')
          this.dictList = res
        }
      })
    },
    queryForm (e) {
      this.formParam = e
      this.initList()
    },
    sizeChange (count) {
      this.page.size = count
      this.initList()
    },
    currentChange (count) {
      this.page.current = count
      this.initList()
    },
    handleEdit (row) {
      this.openChildModal(row)
    },
    openChildModal (param) {
      this.$refs.modal.openModal(param)
    },
    delDict (row) {
      util.openDel(this, { id: row.id }, `字典 -${row.name}`, delDict, this.initList)
    }
  }
}
</script>

<style scoped>

</style>
